<template>
	<view class="content">
		<view class="cont-box">
			<!-- 头部 -->
			<navigationBar title="找房首页" textColor="black" textSize="36rpx" textWeight="normal" />
			<!-- 搜索 -->
			<view class="search">
				<view class="searchLeft">
					武汉<image src="../../static/image/down-1.png" mode="widthFix"
						style="width: 15rpx;height: 10rpx;margin: 0 20rpx;"></image>
				</view>
				<view class="searchCen">

				</view>
				<view class="searchRight">
					<image src="../../static/image/search.png" mode="widthFix"
						style="width: 25rpx;height: 25rpx;margin: 0 15rpx;"></image>
					输入楼盘或者板块关键词
				</view>
			</view>
			<!-- 快捷导航1 -->
			<view class="navigation">
				<view class="navigatClass" v-for="(item,index) in navigaData" :key="index">
					<image :src="item.image" class="image" mode="widthFix">
						<view class="navTitle">
							{{item.name}}
						</view>
				</view>
			</view>
			<!-- 行情表 -->
			<view class="quotation">
				<view class="quota-left">
					<image src="../../static/image/quotation.png" class="quotaimage" mode="widthFix"
						style="width: 128rpx;height: 40rpx;">
						<view class="quotaTile">
							武汉房价
						</view>
				</view>
				<view class="quota-left-one"></view>
				<view class="quota-cen">
					<view class="quota-centVal">
						34226 <text class="centValM">元/m³</text>
					</view>
					<view class="quota-centVal-one">
						二手房
						<image src="../../static/image/upper.png"
							style="width: 12rpx;height: 10rpx;margin: 0 8rpx 10rpx 12rpx;" mode="widthFix"></image>
						<text style="font-size: 24rpx;color: #FF4433;line-height: 24rpx;">1.7%</text>
					</view>
				</view>
				<view class="quota-right">
					<view class="quota-centVal">
						47623 <text class="centValM">元/m³</text>
					</view>
					<view class="quota-centVal-one">
						新房
						<image src="../../static/image/upper.png"
							style="width: 12rpx;height: 10rpx;margin: 0 8rpx 10rpx 12rpx;" mode="widthFix"></image>
						<text style="font-size: 24rpx;color: #FF4433;line-height: 24rpx;">1.7%</text>
					</view>
				</view>
			</view>
			<!-- 好房专区 -->
			<view class="zone">
				<view class="zoneOne">
					<image src="../../static/image/zone.png" class="zoneImage" mode="widthFix">
				</view>
				<view class="zoneBox">
					<view class="zoneTwo">
						<image src="../../static/image/zone-2.png" class="zoneImage" mode="widthFix">
					</view>
					<view class="zoneTwoBox">
						<image src="../../static/image/zone-1.png" class="zoneImage" mode="widthFix">
							<image src="../../static/image/zone-3.png" class="zoneImage" mode="widthFix">
					</view>
				</view>
			</view>
			<!-- tab栏 -->
			<view class="tab">
				<!-- 选项卡类别列表 -->
				<view class="tab-item" v-for=" (item,index) in category" :key="index"
					:class="{'active':isActive==index}" @click="chenked(index)">
					{{item.name}}
					<view class="listHang" v-if="index != 3"></view>
					<view class="tabItem" v-show="isActive==index"></view>

				</view>
			</view>
			<!-- 选项内容 -->
			<view class="introduce">
				<view class="introduceCard">
					<view class="introduceHerd">{{guideData.headName}}
						<image src="../../static/image/right.png" class="quotaimage" mode="widthFix"
							style="width: 20rpx;height: 20rpx;">
					</view>
					<view class="introduceHreact">{{guideData.remarks}}</view>
					<view class="introduceHowd">
						<view class="HowdOne" v-for="(item,index) in guideData.chaid">
							<view class="HowdOneBox">
								<view class="HowdOneBoxLeft">
									<image :src="item.image" mode="widthFix" class="HowdIamge">
								</view>
								<view class="HowdOneBoxRinght">
									<view class="HowdOneTop">{{item.name}}</view>
									<view class="HowdOneCen">{{item.address}}</view>
									<view class="HowdOneBot">{{item.Price}} <span class="Company">元/m³</span></view>
								</view>
							</view>
							<view class="HowdOneCard">
								<span class="HowdOneCardVal">优惠价{{item.concessional}}元/m²</span><span
									class="HowdOneCardVal floatRight">抢
									<image src="../../static/image/right-1.png" class="quotaimage" mode="widthFix"
										style="width: 20rpx;height: 20rpx;">
								</span>
							</view>
						</view>
					</view>
				</view>
				<view class="boxStyle">


					<view class="introduceData ">

						<view class="introduceDataOne" v-for="(item,index) in housingResources" :key="index">
							<view class="selection" v-if="index==1">
								<view class="introduceHerd">优选好房<image src="../../static/image/right.png"
										class="quotaimage" mode="widthFix" style="width: 20rpx;height: 20rpx;">
								</view>
								<view class="introduceHreact">{{guideData.remarks}}</view>
								<view class="selectionBox">
									<image src="../../static/image/zone-2.png" mode="widthFix"
										style="width: 140rpx;height: 190rpx;"></image>
									<image src="../../static/image/zone-2.png" mode="widthFix"
										style="width: 140rpx;height: 190rpx;float: right;"></image>
								</view>
							</view>
							<view class="imageIntro">
								<image :src="item.image" mode="widthFix" style="width: 100%;height: 100%;"></image>
								<text class="imageIntroText">{{item.address}}</text>
							</view>
							<view class="dataintro introText-1">
								{{item.name}} <span v-if="item.houseCode==1"
									style="float: right;font-size: 24rpx;color: #FF5500;">预售</span>
								<span v-else style="float: right;font-size: 24rpx;color: #FF5500;">在售</span>
							</view>
							<view class="dataintro introText-2">建面 {{item.area}}m²</view>
							<view class="dataintro introTypesOf">
								<view class="introType" v-for="(ite,ind) in item.child " :key="ind">{{ite.title}}</view>
							</view>
							<view class="dataintro introPrice">{{item.Price}}元/m²</view>
							<view class="introBoot">
								<span class="introBootVal">荐</span> <span>捡漏低总价新盘</span>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navigationBar from '@/components/navigation-bar.vue'
	export default {
		// 注册组件
		components: {
			navigationBar
		},
		data() {
			return {
				navigaData: [{
						id: 1,
						name: "新房推荐",
						image: "../../static/image/naviga.png"
					},
					{
						id: 1,
						name: "帮我找房",
						image: "../../static/image/tab-3.png"
					},
					{
						id: 1,
						name: "楼市资讯",
						image: "../../static/image/tab-2.png"
					},
					{
						id: 1,
						name: "推荐赚佣",
						image: "../../static/image/naviga.png"
					},
					{
						id: 1,
						name: "房贷计算",
						image: "../../static/image/tab-1.png"
					},
					{
						id: 1,
						name: "地铁沿线",
						image: "../../static/image/naviga.png"
					},
					{
						id: 1,
						name: "教育优选",
						image: "../../static/image/tab-2.png"
					},
					{
						id: 1,
						name: "刚需必看",
						image: "../../static/image/naviga.png"
					},
					{
						id: 1,
						name: "改善首选",
						image: "../../static/image/tab-1.png"
					},
					{
						id: 1,
						name: "装修交付",
						image: "../../static/image/naviga.png"
					}
				],
				// tab
				category: [{
						id: 1,
						name: '为你推荐',
					},
					{
						id: 2,
						name: '即将开盘',
					},
					{
						id: 3,
						name: '离我最近',
					},
					{
						id: 4,
						name: '热门周刊',
					}
				],
				isActive: 0,
				index: 0,
				currentindex: 0,
				// 指南信息
				guideData: {
					headName: "周末看房指南",
					remarks: "追优惠领补贴 每周五更新",
					chaid: [{
						id: 1,
						name: "金融街花溪小镇",
						address: "花都 空港",
						Price: "9900",
						concessional: "8800",
						image: "../../static/image/zone-2.png"
					}, {
						id: 1,
						name: "金融街花溪小镇",
						address: "花都 空港",
						Price: "9900",
						concessional: "8800",
						image: "../../static/image/zone-2.png"
					}]
				},
				//房源信息
				housingResources: [{
						id: 1,
						name: "珠江·时光荟",
						houseCode: 1,
						address: "增城 永宁",
						Price: "1080",
						image: "../../static/image/zone-2.png",
						area: "66-98m²",
						child: [{
							id: 11,
							title: "看房津贴",
							code: 2
						}, {
							id: 11,
							title: "车位充足",
							code: 2
						}, {
							id: 11,
							title: "全景飘窗",
							code: 2
						}]
					},
					{
						id: 1,
						name: "珠江·时光荟",
						houseCode: 1,
						address: "增城 永宁",
						Price: "1080",
						image: "../../static/image/zone-2.png",
						area: "66-98m²",
						child: [{
							id: 11,
							title: "看房津贴",
							code: 2
						}, {
							id: 11,
							title: "车位充足",
							code: 2
						}, {
							id: 11,
							title: "全景飘窗",
							code: 2
						}]
					},
					{
						id: 1,
						name: "珠江·时光荟",
						houseCode: 1,
						address: "增城 永宁",
						Price: "1080",
						image: "../../static/image/zone-2.png",
						area: "66-98m²",
						child: [{
							id: 11,
							title: "看房津贴",
							code: 2
						}, {
							id: 11,
							title: "车位充足",
							code: 2
						}, {
							id: 11,
							title: "全景飘窗",
							code: 2
						}]
					},
					{
						id: 1,
						name: "珠江·时光荟",
						houseCode: 1,
						address: "增城 永宁",
						Price: "1080",
						image: "../../static/image/zone-2.png",
						area: "66-98m²",
						child: [{
							id: 11,
							title: "看房津贴",
							code: 2
						}, {
							id: 11,
							title: "车位充足",
							code: 2
						}, {
							id: 11,
							title: "全景飘窗",
							code: 2
						}]
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			chenked(index) {
				console.log("点击数据", index);
				this.isActive = index;

			},
		}
	}
</script>

<style>
	.content {
		width: 100%;
		/* height: 100vh; */
		padding-bottom: 60rpx;
		background: linear-gradient(180deg, #FFD0CC 0%, #F5F7FA 40%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.cont-box {
		width: 688rpx;
		height: 100%;
		margin: 0 auto;
	}

	.search {
		width: 688rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin: 15rpx 0;
		background: #FFFFFF;
		box-shadow: 0rpx 16rpx 40rpx 2rpx rgba(20, 102, 102, 0.1);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		text-align: center;
		display: flex;
		justify-content: space-evenly;
		flex-wrap: nowrap;
		align-items: center;
	}

	.searchLeft {
		width: 20%;
		font-family: PingFangSC-Regular, PingFangSC-Regular;
		font-weight: normal;
		font-size: 28rpx;
		color: #36414D;
		line-height: 28rpx;
		font-style: normal;
		text-transform: none;
	}

	.searchCen {
		width: 2rpx;
		height: 32rpx;
		background: #36414D;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 0.1;
	}

	.searchRight {
		width: 79%;
		font-family: PingFangSC-Regular, PingFangSC-Regular;
		font-weight: normal;
		font-size: 28rpx;
		color: #B6BBBF;
		line-height: 28rpx;
		font-style: normal;
		text-transform: none;
		margin-left: 30rpx;
		text-align: left;
	}

	.navigation {
		width: 688rpx;
		height: 300rpx;
		margin: 40rpx 0;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;
		gap: 28rpx;
	}

	.navigatClass {
		width: 96rpx;
		height: 120rpx;
		text-align: center;
	}

	.navTitle {
		margin-top: 10rpx;
		font-family: PingFangSC-Regular, PingFangSC-Regular;
		font-weight: normal;
		font-size: 24rpx;
		color: #36414D;
		line-height: 24rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.image {
		width: 80rpx;
		height: 80rpx;
	}

	.quotation {
		width: 686rpx;
		height: 144rpx;
		background: #FFF9F9;
		border: 2rpx solid #FFEBED;
		display: flex;
		justify-content: space-evenly;
		flex-wrap: nowrap;
		align-items: center;
	}

	.quota-left-one {
		width: 2rpx;
		height: 80rpx;
		background: #29CCA3;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 0.2;
	}

	.quota-left {
		width: 25%;
		height: 90rpx;
		text-align: center;
	}

	.quotaTile {
		margin-top: 10rpx;
		font-family: PingFangSC-Regular, PingFangSC-Regular;
		font-weight: normal;
		font-size: 24rpx;
		color: #3C4752;
		line-height: 24rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}



	.quota-cen {
		width: 35%;
		height: 90rpx;
		/* text-align: center; */
		margin-left: 50rpx;
	}

	.quota-centVal {
		width: 100%;
		font-family: D-DINExp-Bold, D-DINExp-Bold;
		font-weight: normal;
		font-size: 36rpx;
		color: #36414D;
		line-height: 36rpx;
		/* text-align: center; */
		font-style: normal;
		text-transform: none;
	}

	.centValM {
		font-family: PingFangSC-Regular, PingFangSC-Regular;
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.quota-centVal-one {
		margin-top: 20rpx;
		font-family: PingFangSC-Regular, PingFangSC-Regular;
		font-size: 24rpx;
		color: #929599;
		line-height: 24rpx;
	}

	.quota-right {
		width: 35%;
		height: 90rpx;
		/* margin-left: 50rpx; */
	}

	.zone {
		width: 688rpx;
		height: 550rpx;
		margin-top: 20rpx;
	}

	.zoneOne {
		height: 200rpx;
	}

	.zoneBox {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.zoneTwo {
		width: 49%;
		height: 100%;
	}

	.zoneTwoBox {
		width: 49%;
		height: 100%;
	}

	.zoneImage {
		width: 100%;
		height: 100%;
		margin-top: 10rpx;
	}

	.tab {
		width: 688rpx;
		margin: 30rpx auto;
		display: flex;
		justify-content: center;
		flex-wrap: nowrap;
		align-items: center;
	}

	.tab-item {
		width: 100%;
		height: 40rpx;
		font-family: PingFangSC-Medium, PingFangSC-Medium;
		font-weight: normal;
		font-size: 28rpx;
		color: #737980;
		line-height: 28rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		position: relative;
	}

	.active {
		color: #36414D;
	}

	.tabItem {
		margin: 10rpx auto 0;
		width: 48rpx;
		height: 6rpx;
		background: #FF4333;
		border-radius: 4rpx 4rpx 4rpx 4rpx;

	}

	.listHang {
		position: absolute;
		top: 0;
		right: 0;
		width: 2rpx;
		height: 28rpx;
		background: #E6E6E6;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.introduce {
		width: 688rpx;
	}

	.introduceCard {
		width: 100%;
		height: 284rpx;
		background: linear-gradient(180deg, #FFDFDC 0%, #FFFFFF 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 4rpx solid #FFFFFF;
	}

	.introduceHerd {
		margin: 25rpx 0 0 20rpx;
		font-family: PingFangSC-Medium, PingFangSC-Medium;
		font-weight: normal;
		font-size: 28rpx;
		color: #36414D;
		line-height: 28rpx;
		font-style: normal;
		text-transform: none;
	}

	.introduceHreact {
		margin: 15rpx 0 0 20rpx;
		font-family: PingFangSC-Regular, PingFangSC-Regular;
		font-weight: normal;
		font-size: 20rpx;
		color: #FF5500;
		line-height: 20rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.boxStyle {
		column-count: 2; // 每行展示的列数
		column-gap: 13px; // 列之间的距离
	}

	.selectionBox {
		text-align: left;
		margin: 10rpx 16rpx;

	}

	.introduceHowd {
		width: 100%;
		display: flex;
		justify-content: left;
		flex-wrap: nowrap;
		align-items: center;
	}

	.HowdOne {
		width: 46%;
		/* height: 200rpx; */
		margin-top: 16rpx;
		margin-left: 20rpx;
	}

	.HowdOneBox {
		width: 100%;
		display: flex;
		justify-content: left;
		flex-wrap: nowrap;
		align-items: center;
	}

	.HowdOneBoxLeft {
		width: 96rpx;
		height: 96rpx;
		background: #D8D8D8;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		/* border: 2rpx solid #979797; */
	}

	.HowdOneBoxRinght {
		margin-left: 16rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
		font-family: PingFangSC-Medium, PingFangSC-Medium;
		font-weight: normal;
	}

	.HowdIamge {
		width: 100%;
		height: 100%;
	}

	.HowdOneTop {
		font-size: 24rpx;
		color: #36414D;
		line-height: 24rpx;
	}

	.HowdOneCen {
		font-family: PingFangSC-Regular, PingFangSC-Regular;
		font-size: 20rpx;
		color: #929599;
		line-height: 20rpx;
		margin: 16rpx 0 20rpx 0;
	}

	.HowdOneBot {
		font-size: 28rpx;
		color: #36414D;
		line-height: 28rpx;
	}

	.Company {
		font-family: PingFangSC-Regular, PingFangSC-Regular;
		font-size: 24rpx;
		color: #36414D;
		line-height: 24rpx;
		text-align: center;
	}

	.HowdOneCard {
		width: 100%;
		height: 48rpx;
		margin-top: 16rpx;
		align-items: center;
		background: rgba(255, 153, 51, 0.1);
		padding: 0 16rpx;
		box-sizing: border-box;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.HowdOneCardVal {
		font-family: PingFangSC-Medium, PingFangSC-Medium;
		font-weight: normal;
		font-size: 24rpx;
		color: #FF5500;
		line-height: 24rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.floatRight {
		float: right;
		margin-top: 12rpx;
	}

	.introduceData {
		
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;
	}

	.selection {
		width: 334rpx;
		height: 225rpx;
		background: linear-gradient(180deg, #FFDEDB 0%, #FFFFFF 100%) !important;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 4rpx solid #FFFFFF;
		margin-bottom: 20rpx;
	}

	.introduceDataOne {
		break-inside: avoid;
		width: 334rpx;
		/* height: 550rpx; */
		background: #FFFFFF;
		border-radius: 15rpx;
		/* height: 590rpx; */
		margin-top: 16rpx;
		margin-bottom: 16rpx;
	}

	.imageIntro {

		width: 334rpx;
		height: 330rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		position: relative;
	}

	.imageIntroText {
		position: absolute;
		left: 44rpx;
		bottom: 16rpx;
		font-family: PingFangSC-Regular, PingFangSC-Regular;
		font-weight: normal;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 24rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.dataintro {
		width: 300rpx;
		margin-left: 16rpx;
		align-items: center;
		font-weight: normal;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.introText-1 {
		margin-top: 20rpx;
		font-family: PingFangSC-Medium, PingFangSC-Medium;
		font-size: 28rpx;
		color: #36414D;
		line-height: 36rpx;
	}

	.introText-2 {
		margin-top: 5rpx;
		font-family: PingFangSC-Regular, PingFangSC-Regular;
		font-weight: normal;
		font-size: 24rpx;
		color: #929599;
		line-height: 24rpx;
	}

	.introTypesOf {
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
		align-items: center;
	}

	.introType {
		width: 96rpx;
		height: 32rpx;
		line-height: 32rpx;
		margin: 12rpx 0 16rpx;
		text-align: center;
		background: rgba(99, 122, 166, 0.1);
		font-family: PingFangSC-Regular, PingFangSC-Regular;
		font-size: 20rpx;
		color: #637AA6;
	}

	.introPrice {
		font-family: PingFangSC-Medium, PingFangSC-Medium;
		font-size: 24rpx;
		color: #FF5500;
		line-height: 24rpx;
	}

	.introBoot {
		width: 334rpx;
		height: 64rpx;
		line-height: 64rpx;
		margin-top: 12rpx;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFECEB 100%);
		border-radius: 0rpx 0rpx 16rpx 16rpx;
		border: 2rpx solid #FFFFFF;
		font-family: PingFangSC-Regular, PingFangSC-Regular;
		font-size: 24rpx;
		color: #616366;
	}

	.introBootVal {
		margin-left: 16rpx;
		margin-right: 10rpx;
		color: #FF5500;
	}
</style>
